<template>
  <div class="form-comp">
    <div class="toolbar-item toolbar-select"
         v-if="label">
      <el-input size="default"
                :style="{width:(label.length==2?'68px':label.length==3?'82px':label.length==4?'96px':label.length==7?'138px':label.length==6?'128px':''),float:'left'}">
        <template #prepend>{{ label }}</template>
      </el-input>

      <el-tree-select v-model="compValue"
                      placeholder="请选择"
                      size="default"
                      check-strictly
                      :disabled="disabled"
                      :props="defaultProps"
                      clearable
                      node-key="key"
                      :data="compData"
                      @node-click="updateCompValue"
                      :render-after-expand="false"
                      :class="label.length==3?'prepend-3':label.length==4?'prepend-4':label.length==5?'prepend-5':label.length==6?'prepend-6':label.length==7?'prepend-7':'prepend-2'"
      />
    </div>
    <el-tree-select v-model="compValue"
                    v-else
                    placeholder="请选择"
                    size="default"
                    check-strictly
                    :default-expanded-keys="expandedKeys"
                    :props="defaultProps"
                    clearable
                    :disabled="disabled"
                    :render-after-expand="false"
                    node-key="key"
                    @node-click="updateCompValue"
                    :data="compData"
    />
  </div>

</template>

<script lang="ts" setup>
//定义组件名称
defineOptions({
  name: "FormMenuSelect"
});
// @ts-ignore
import {ref, getCurrentInstance, watchEffect, watch, onMounted} from 'vue'

const props = defineProps({
  label: {type: String, required: false},
  value: {type: String, required: true},
  permissionScope: {type: String, required: true},
  disabled: {type: Boolean, required: false}
});
const expandedKeys = ref<any>([]);

const compValue = ref<any>(null);
const compData = ref<any>(null);

const defaultProps = {
  label: 'title',
  children: 'children',
  isLeaf: 'isLeaf',
}
const emit = defineEmits(['update:value', 'update:permissionScope'])

// @ts-ignore
let {proxy} = getCurrentInstance()

onMounted(() => {
  loadData().then((data:any)=>{
    compData.value = data;
    if (props.value) {
      compValue.value = props.value + ""
    }
    expandedKeysNode();
  });
})

//获取机构select-tree数据
const loadData = () => {
  return new Promise((resolve, reject) => {
    proxy.$http.tablePost("/user-center/menu/menuTree", {}).then((res: any) => {
      expandedKeys.value=[];
      resolve(res.data.data);
    });
  })
}

//监听变化
watch(() => props.value, () => {
  compValue.value = props.value+'';

})

const expandedKeysNode=()=>{
  proxy.$http.post("/user-center/menu/findOne", {id: props.value}).then(function (api: any) {
    expandedKeys.value.push(api.data.parentId);
  });
}

function updateCompValue(menu: any, treeNode: any) {
  emit("update:value", menu.key)
  emit("update:permissionScope", menu.permissionScope)

}

</script>

<style scoped>

</style>
